import React from "react";
import {Colors} from "@blueprintjs/core";
import {PoetrySwitchPanel} from "../poetry-text/Text";
import {StyledPhonics, StyledPhonicsPanel, StyledPhonicsWrapper} from "./Phonics-style";
import {usePoetry} from "../ poetry-hooks";
import {Rules} from "../Rules";

const pinyinData = {
    "initials": {
        style: {
            bgColor: Colors.GREEN3,
            fgColor: Colors.WHITE,
        },
        items: ["b:伯", "p:坡", "m:摸", "f:佛", "d:的", "t:特", "n:呢", "l:了", "g:鸽", "k:蝌", "h:喝", "j:鸡", "q:七", "x:西", "zh:只", "ch:吃", "sh:湿", "r:日", "z:子", "c:词", "s:丝", "y:衣", "w:屋"]
    },
    "finals": {
        style: {
            bgColor: Colors.GRAY2,
            fgColor: Colors.WHITE,
        },
        items: ["a:阿", "o:哦", "e:鹅", "i:衣", "u:屋", "ü:雨", "ai:矮", "ei:诶", "ui:围", "ao:傲", "ou:欧", "iu:游", "ie:叶", "üe:约", "er:儿", "an:安", "en:嗯", "in:音", "un:温", "ün:云", "ang:昂", "eng:等", "ing:应", "ong:用"]
    },
    "wholeSyllable": {
        style: {
            bgColor: Colors.COBALT3,
            fgColor: Colors.WHITE,
        },
        items: ["zhi:只", "chi:吃", "shi:诗", "ri:日", "zi:子", "ci:词", "si:丝", "wu:屋", "yi:衣", "yu:与", "ye:叶", "yue:月", "yuan:圆", "yin:音", "yun:云", "ying:应"]
    }
};

function Phonetics(props) {
    const {fgColor, bgColor} = props;

    return <StyledPhonics {...{fgColor, bgColor}}
                          onClick={() => props.playSound(props.phonetics.split(':')[0])}>{props.phonetics}</StyledPhonics>;
}

export function PhonicsPanel() {
    const {addPlayItem} = usePoetry();
    const playSound = (phonics) => {
        addPlayItem(phonics);
    };

    let styledPhonicsPanel = <><Rules/>
        {
            Object.keys(pinyinData).map(type => {
                return <StyledPhonicsWrapper key={type}>
                    {pinyinData[type].items.map(item => <Phonetics key={item} phonetics={item}
                                                                   bgColor={pinyinData[type].style.bgColor}
                                                                   fgColor={pinyinData[type].style.fgColor}
                                                                   playSound={playSound}/>)}
                </StyledPhonicsWrapper>
            })
        }</>;
    return <StyledPhonicsPanel>
        <PoetrySwitchPanel/>
        {/*{styledPhonicsPanel}*/}
    </StyledPhonicsPanel>
}
